<template>
    <div>
        <mt-header title="学前端，到达内" fixed>
      <div slot="right">
         <router-link to='/register' class="link">注册</router-link>
         &nbsp;
         <router-link to="/login" class="link">登录</router-link>
      </div>
    </mt-header>
    <mt-navbar 
    key=""
    style="margin-top:40px" 
     v-model="selected" fixed>
 <mt-tab-item v-for="item in data" :key="item.id" :id="item.id+''">
   {{item.category_name}}
 </mt-tab-item>
</mt-navbar>
 <div>
    <!-- testing/Swipe.vue -->
    <mt-swipe style="height:56.2vw;margin-top:90px">
        <mt-swipe-item>
            <img src="/1.jpg">
        </mt-swipe-item>
        <mt-swipe-item>
            <img src="/2.jpg">
        </mt-swipe-item>
        <mt-swipe-item>
            <img src="/3.jpg">
        </mt-swipe-item>
    </mt-swipe>
    <!-- 引入文章列表 -->
  <articleitem v-for="item in 20" :key="item" />
  </div>
    </div>
</template>
<script>
import articleitem from '../components/articleitem.vue';

export default {
  components: { articleitem },

  data() {
    return {
      data:'',
      selected:'1'
    }
  },
  mounted(){
    let url='/category'
    this.axios.get(url).then((res)=>{
      console.log(res);
      this.data=res.data.results
    })
  }
};
</script>
<style scoped>
  .link{
    color:#fff
  }
.mint-swipe img {
    width: 100%;
}
</style>